<template>
  <div class="hFull flex column">
    <div class="languageTile">
      <div class="topTxt">学生端</div>
    </div>
    <div class="title">语素意识干预</div>
    <div class="equal boxBgcolor overflow-y">
      <div class="flex column">
        <div class="flex txtc bar">
          <div class="equal" v-bind:class="{active:groupId==1}" @click="selectGroup(1)">
            <i></i>
            <p>前测</p>
          </div>
          <div class="line"></div>
          <div class="equal" v-bind:class="{active:groupId==2}" @click="selectGroup(2)">
            <i></i>
            <p>干预训练</p>
          </div>
          <div class="line"></div>
          <div class="equal" v-bind:class="{active:groupId==3}" @click="selectGroup(3)">
            <i></i>
            <p>后测</p>
          </div>
        </div>
        <div class="equal overflow-y morphemBox">
          <div class="morpheme">
            <ul>
              <li v-for="unit in getUnitList" :key="unit.unitId" v-bind:class="{on:unit.isUnLocked==1}">
                <div class="flex jccenter aicenter">
                  <div class="mpUser flex jccenter aicenter">
                    <span class="iconkey"></span>
                    <span class="mpName fz18">{{unit.unitName}}</span>
                  </div>
                  <div class="equal txtc fz18">{{unit.unitTitle}}</div>
                  <div class="starBtn">
                    <input type="button" value="开始"  @click="selectUnit(groupId,unit.unitId)" />
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      groupId: 1,
    };
  },
  created() {
    this.init();
  },
  computed: {
    getUnitList: function () {
      let root = this;
      let groups = this.list.filter(function (group) {
        return group.groupId === root.groupId;
      });
      if(groups && groups.length>0){
        return groups[0].unitList;
      }else
      {
        return [];
      }
    }
  },
  methods: {
    async init() {
      this.$api.unit
        .groupList({ partId: this.$route.query.partId })
        .then((res) => {
          console.log(res.data)
          if (res.data.status == 1) {
            this.list = res.data.data.list;
          }
        });
    },
    selectGroup(id) {
      this.groupId = id;
    },
    selectUnit(groupId, unitId) {
      this.$router.push({
        name: "question",
        query: { groupId: groupId, unitId: unitId },
      });
    },
  },
};
</script>
<style scoped>
.topTxt{  font-size: .18rem; color:#0F1011;  line-height: .7rem;}
.languageTile{background:#FFD580;  height: .7rem; padding: 0 .3rem; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;}
.title{height: 1.47rem; background: url(../assets/images/bg-01.png) no-repeat; background-size: 100% 100%; font-size: .36rem; color: #282828; line-height: 1.47rem; padding-left: 1.4rem;}
.boxBgcolor{ background-color: #FFF1D1;}
.bar i{ width: .36rem; height: .36rem; display: inline-block;  background: url(../assets/images/radio.png)no-repeat; background-size: 100%; }
.bar .active i { background: url(../assets/images/radioCheck.png)no-repeat; background-size: 100%; vertical-align: -3px;}
.bar{ padding: .5rem .38rem;}
.bar p{ font-size: .28rem; color: #A09479;}
.bar .active p{ color: #131415;}
.line{ width:1.2rem; height: 0.01rem; border-top: 1px dotted  #EBDBB6; margin-top: .1rem;}

.morpheme{ padding: 0 .38rem;}
.morpheme ul li{background: #FFFFFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);border-radius: .08rem; padding: .2rem .2rem; margin-bottom: .2rem;}
.mpUser span.iconkey{width: .32rem; height: .36rem;display: inline-block;  background: url(../assets/images/lock.png)no-repeat; background-size: 100%; margin-right: .1rem;}
.starBtn input{background: #FFBB31;border-radius: .05rem; font-size: .18rem; color: #fff; padding: .05rem .34rem; border:none;opacity: 0.4; cursor: pointer;}
.morpheme ul li.on .starBtn input{ background: #6DD400;opacity: 1;}
.morpheme ul li.on .mpUser span.iconkey{ background: url(../assets/images/lockOpen.png)no-repeat; background-size: 100%;}
</style>